// Generated using webpack-cli https://github.com/webpack/webpack-cli

// 该文件就是webpack 的配置文件, 所有的配置都在这里完成

const path = require('path'); // nodejs 中内置模块, 用来处理路径的
// 引入一个第三方插件, 该插件可以将index.html单页面文件打包到build后的目录中,并压缩
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入第三方插件, 该插件用来将js 中的css 抽离成一个单独的css 文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 获取当前的环境变量
const isProduction = process.env.NODE_ENV == 'production';
// 根据当前的环境变量 决定是否配置  MiniCssExtractPlugin.loader
const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader';
// 引入  vue-loader 加载器用来处理编译 后缀为.vue 的文件
const { VueLoaderPlugin } = require('vue-loader');
// 如下为webpack 的核心配置文件(重要核心)
const config = {
    // entry: './src/index.js', // 单入口配置
    // entry: { // 多入口文件配置
    //     index: './src/index.js',
    //     login: './src/login.js'
    // },
    entry: './src/main.js', // vue 项目的入口文件
    output: { // 出口配置
        path: path.resolve(__dirname, 'dist'),
    },
    devServer: { // 配置本地服务器
        open: true,
        host: 'localhost',
        proxy: {
            // 一旦devServer服务器接受到 /api开头的请求，就会把请求转发到另一个服务器
            "/api": {
                target: "http://kumanxuan1.f3322.net:8001",
                // 发送请求时，请求路径重写: 将/api 去除
                pathRewrite: {
                    "^/api": "",
                },
            },
        }
    },
    plugins: [ // 插件配置
        new HtmlWebpackPlugin({
            template: 'index.html',
        }),

        new VueLoaderPlugin(), // 使用vue-loader提供的插件

    ],
    module: {
        rules: [ // 该规则用来配置所有的loader
            {
                test: /\.vue$/,
                loader: "vue-loader",
            },
            {
                test: /\.(js|jsx)$/i,
                loader: 'babel-loader', // 使用babel-loader 编译后缀是js或jsx的文件 
                // babel-loader 可以将一些高级js 语法.编译成es5 语法
            },
            {
                test: /\.less$/i, // 对于项目中的less文件使用  如下loader 进行编译打包
                use: [stylesHandler, 'css-loader', 'postcss-loader', 'less-loader'],
            },
            {
                test: /\.css$/i,
                use: [stylesHandler, 'css-loader', 'postcss-loader'],
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif|jpeg)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'img/[name][ext]'  // 指定输出的打包后的图片文件的路径
                },
                use: [
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: { // 配置压缩 jpeg图片
                                progressive: true,
                                quality: 65
                            },
                            optipng: { //配合pngquant一起使用,共同压缩png图片
                                enabled: false,
                            },
                            pngquant: { //压缩png图片
                                quality: '65-90',
                                speed: 4
                            },
                            gifsicle: { // 压缩 gif
                                interlaced: false,
                            },
                            webp: { // 压缩webp
                                quality: 75
                            }
                        }
                    }
                ]
            },
            {
                test: /\.html$/,
                // 处理html中的img,负责引入img
                use: [
                    { loader: "html-loader" },
                ]
            }

        ],
    },
    resolve: {
        // 配置解析模块路径别名：优点简写路径，缺点路径没有提示
        alias: {
            // 定义一个@，可在import引入时使用
            "@": path.join(__dirname, "./src"),
        },
        // 设置可以忽略不写的后缀
        extensions: [".js", ".vue", ".jsx"]  // 在webpack5 后缀不需要处理设置了. webpack5之前需要改配置
    },
    externals: { // 设置忽略打包的文件, 
        jquery: 'jQuery', // 设置webpack 不打包 jquery
        // .....
    }
};

module.exports = () => {
    if (isProduction) {
        // mode 模式
        config.mode = 'production';

        config.plugins.push(new MiniCssExtractPlugin({
            filename: 'css/[name]_[hash:6].css'
        }));


    } else {
        config.mode = 'development';
    }
    return config;
};
